<template>
  <div id="transfer">
    <el-transfer v-model="value1" :data="businessArr" style="text-align: left;margin: auto;"></el-transfer>
  </div>

</template>

<script>
	export default {
		props: {
			dataArr: {
				type: Object
			}
		},
		data () {

			return {
				value1: [],
				businessArr: []
			}
		},
		created() {
			this.getDataArr();
		},

		methods: {
			getDataArr() {
				let _this = this;
				let params = _this.dataArr.data;

				for(let i =0;i<params.length; i++){
					_this.businessArr.push({
						key:params[i].key,
						label:params[i].label
					})
				}
				let params2 = _this.dataArr.checkedKeys;
				for(let i =0;i<params2.length; i++){

					_this.value1.push(params2[i])
				}
			}
		},
		watch:{
			value1(val){
				this.$emit("businessId",val)
			},
      dataArr(val){
			  console.log(val);
			   this.value1=[];
			   this.businessArr=[];
			   this.getDataArr()
      }
		}
	}
</script>

<style lang="less">
  #transfer{
  .el-transfer {
    display: flex!important;
    justify-content: center!important;
  }

  .el-transfer__buttons {
    display: flex!important;
    flex-direction: column!important;
    padding: 0 10px!important;
    justify-content: center!important;
  }

  .el-transfer-panel__body {
    padding-bottom: 36px!important;
    height: 285px!important;
  }
  }

</style>
